<template>
  <div class="custom-select" :class="{ error: error }">
    <div class="select-trigger" @click="toggleDropdown">
      <span :class="{ placeholder: !modelValue }">
        {{ selectedLabel || placeholder }}
      </span>
      <PhCaretDown
        :class="['icon', { 'icon-rotate': isOpen }]"
        :size="16"
      />
    </div>
    <Transition name="slide-fade">
      <div v-if="isOpen" class="options-container">
        <div
          v-for="option in options"
          :key="option.value"
          class="option"
          :class="{ active: modelValue === option.value }"
          @click="selectOption(option)"
        >
          {{ option.label }}
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { PhCaretDown } from '@phosphor-icons/vue';

interface Option {
  label: string;
  value: string;
}

const props = defineProps<{
  modelValue: string;
  options: Option[];
  placeholder?: string;
  error?: boolean;
}>();

const emit = defineEmits<{
  'update:modelValue': [value: string];
}>();

const isOpen = ref(false);

const selectedLabel = computed(() => {
  const selected = props.options.find(opt => opt.value === props.modelValue);
  return selected?.label;
});

const toggleDropdown = () => {
  isOpen.value = !isOpen.value;
};

const selectOption = (option: Option) => {
  emit('update:modelValue', option.value);
  isOpen.value = false;
};

// 点击外部关闭下拉框
const closeDropdown = (e: MouseEvent) => {
  const target = e.target as HTMLElement;
  if (!target.closest('.custom-select')) {
    isOpen.value = false;
  }
};

// 生命周期钩子
onMounted(() => {
  document.addEventListener('click', closeDropdown);
});

onUnmounted(() => {
  document.removeEventListener('click', closeDropdown);
});
</script>

<style lang="less" scoped>
.custom-select {
  position: relative;
  width: 100%;

  .select-trigger {
    height: 40px;
    padding: 0 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: #1f2937;

    .placeholder {
      color: #9ca3af;
    }

    .icon {
      transition: transform 0.2s;
      color: #6b7280;
    }

    .icon-rotate {
      transform: rotate(180deg);
    }

    &:hover {
      border-color: #3b82f6;
    }
  }

  .options-container {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;
    }

    .option {
      padding: 10px 16px;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 14px;

      &:hover {
        background: #f3f4f6;
      }

      &.active {
        background: #eff6ff;
        color: #3b82f6;
      }
    }
  }

  &.error {
    .select-trigger {
      border-color: #ef4444;

      &:hover {
        border-color: #ef4444;
      }
    }
  }
}

// 深色模式
@media (prefers-color-scheme: dark) {
  .custom-select {
    .select-trigger {
      background: #374151;
      border-color: #4b5563;
      color: #e5e7eb;

      .placeholder {
        color: #9ca3af;
      }

      &:hover {
        border-color: #60a5fa;
      }
    }

    .options-container {
      background: #1f2937;
      border: 1px solid #4b5563;

      &::-webkit-scrollbar-track {
        background: #374151;
      }

      &::-webkit-scrollbar-thumb {
        background: #4b5563;
      }

      .option {
        color: #e5e7eb;

        &:hover {
          background: #374151;
        }

        &.active {
          background: #1e40af;
          color: #60a5fa;
        }
      }
    }

    &.error {
      .select-trigger {
        border-color: #f87171;

        &:hover {
          border-color: #f87171;
        }
      }
    }
  }
}

// 动画
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.2s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
